<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            position: relative;
            width: 400px;
            height: 600px;
            margin-left: 50px;
            margin-top: 50px;
            float: left;
        }

        #content {
            position: relative;
            width: 600px;
            height: 600px;
            margin-left: 50px;
            margin-top: 50px;
            border: 1px solid red;
            float: left;
        }

        #top {
            height: 400px;
            width: 400px;
            position: relative;
        }

        #smallimg {
            height: 400px;
            width: 400px;
        }

        #nav {
            width: 400px;
            height: 200px;
        }

        #nav li {
            float: left;
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }

        #nav li img {
            width: 100px;
            height: 100px;
        }

        #shadow {
            height: 50px;
            width: 50px;
            position: absolute;
            background-color: rgba(100, 50, 120, 0.4);
            left: 0;
            top: 0;
            border-radius: 50%;
            display: none;
        }

        #bigshadow {
            position: absolute;
            height: 100px;
            width: 100px;
            left: 500px;
            top: 0;
            overflow: hidden;
            border-radius: 50%;
            display: none;
        }

        #bigimg {
            height: 800px;
            width: 800px;
            position: absolute;
            left: 0;
            top: 0;

        }
    </style>
</head>
<body>
<div id="box">
    <div id="top">
        <img id="smallimg" src="img/small1.jpg" draggable="false">
        <div id="shadow"></div>

        <div id="bigshadow">
            <img src="img/big1.jpg" id="bigimg">
        </div>
    </div>
    <ul id="nav">

        <!--</li>-->
        <!--<li data-small="img/small2.jpg" data-big="img/big2.jpg">-->
        <!--<img src="img/small2.jpg" draggable="false"></li>-->
        <!--<li data-small="img/small3.jpg" data-big="img/big3.jpg">-->
        <!--<img src="img/small3.jpg" draggable="false"></li>-->
        <!--<li data-small="img/small4.jpg" data-big="img/big4.jpg">-->
        <!--<img src="img/small4.jpg" draggable="false"></li>-->
    </ul>
</div>

<div id="content">
    <p id="goodsname"></p>
    <p id="goodsprice"></p>
    <p id="goodsnum"></p>
    <button id="btn">加入购物车</button>
</div>
</body>
<script>

    var list = [{
        id: 1,
        goodsname: "测试商品1",
        goodsnum: 1,
        goodsprice: 100,
        smallimg: "small",
        bigimg: "big"
    }, {
        id: 2,
        goodsname: "测试商品2",
        goodsnum: 2,
        goodsprice: 200,
        smallimg: "girlsmall",
        bigimg: "girlbig"
    }, {
        id: 3,
        goodsname: "测试商品3",
        goodsnum: 3,
        goodsprice: 300,
        smallimg: "motoPic",
        bigimg: "motoPicbig"
    }];

    var nav = document.getElementById("nav");
    var smallimg = document.getElementById("smallimg");
    var bigImg = document.getElementById("bigimg");
    var goodsnameP = document.getElementById("goodsname");
    var goodsnumP = document.getElementById("goodsnum");
    var goodspriceP = document.getElementById("goodsprice");

    //跳转到08页面的时候  获取页面传过来的编号
    var search = window.location.search;//获取传来的参数?id=3
    if (search.indexOf("id") != -1) {
        var id = search.split("=")[1];//获取页面传递过来的id 1
        var goodsInfo = list.filter(function (item) {
            return item.id == id;
        })[0];//{id: 2,goodsname: "测试商品2",goodsnum: 2,goodsprice: 200,smallimg: "girlsmall",bigimg: "girlbig"}
        var smallSrc = goodsInfo.smallimg;//得到小图
        var bigSrc = goodsInfo["bigimg"];//得到大图的地址
        var goodsname = goodsInfo.goodsname;
        var goodsnum = goodsInfo.goodsnum;
        var goodsprice = goodsInfo["goodsprice"];

        goodsnameP.innerHTML = goodsname;
        goodsnumP.innerHTML = "商品数量:" + goodsnum;
        goodspriceP.innerHTML = "商品价格:" + goodsprice;
        //把一些有用的数据 赋给按钮
        btn.goodsid = id;
        btn.goodsprice = goodsprice;
        btn.goodsname = goodsname;
        btn.goodsimg = "img/" + smallSrc + "1.jpg";

        smallimg.src = "img/" + smallSrc + "1.jpg";
        bigImg.src = "img/" + bigSrc + "1.jpg";

        var html = "";
        for (var i = 1; i <= 4; i++) {
            html += `<li data-small="img/${smallSrc}${i}.jpg" data-big="img/${bigSrc}${i}.jpg">
                        <img src="img/${smallSrc}${i}.jpg" draggable="false">
                      </li>`;
        }
        nav.innerHTML = html;

        btn.onclick = function () {
//            alert("点击加入到购物车");
            alert("商品编号:" + this.goodsid + "商品名称:" + this.goodsname);
        }


    } else {
        window.location.href = "index.html";
    }


    var navList = document.querySelectorAll("#nav li");
    var topBox = document.getElementById("top");
    var box = document.getElementById("box");
    var shadow = document.getElementById("shadow");
    var bigShadow = document.getElementById("bigshadow");
    var boxLeft = getStyleAttr(box, "margin-left");
    var boxTop = getStyleAttr(box, "marginTop");
    var shadowWidth = getStyleAttr(shadow, "width");
    var shadowHeight = getStyleAttr(shadow, "height");

    var bigImgWidth = getStyleAttr(bigImg, "width");
    var bigImgHeight = getStyleAttr(bigImg, "height");

    var bigShadowWidth = getStyleAttr(bigShadow, "width");
    var bigShadowHeigth = getStyleAttr(bigShadow, "height");

    var topWidth = topBox.offsetWidth;
    var topHeight = topBox.offsetHeight;
    var maxLeft = topWidth - shadowWidth;
    var maxTop = topHeight - shadowHeight;

    //遮罩层移动事件
    topBox.onmousemove = function (e) {
        var e = window.event || e;
        var pageX = e.pageX;
        var pageY = e.pageY;

        var x = pageX - boxLeft - shadowWidth / 2;
        var y = pageY - boxTop - shadowHeight / 2;
//范围的控制
        if (x <= 0) {
            x = 0;
        }
        if (y <= 0) {
            y = 0;
        }
        if (x >= maxLeft) {
            x = maxLeft;
        }
        if (y >= maxTop) {
            y = maxTop;
        }

        // x:400 = ?:800
        var bigX = bigImgWidth * x / topWidth;
        var bigY = bigImgHeight * y / topHeight;

        shadow.style.left = x + "px";
        shadow.style.top = y + "px";
        bigImg.style.left = -bigX + "px";
        bigImg.style.top = -bigY + "px";
        shadow.style.display = "block";
        bigShadow.style.display = "block";


        var bigShadowLeft = x - (bigShadowWidth - shadowWidth) / 2;
        var bigShadowTop = y - (bigShadowHeigth - shadowHeight) / 2;

        bigShadow.style.left = bigShadowLeft + "px";
        bigShadow.style.top = bigShadowTop + "px";


    }
    topBox.onmouseout = function () {
        shadow.style.display = "none";
        bigShadow.style.display = "none";


    }

    for (var i = 0; i < navList.length; i++) {//底部切换事件
        navList[i].onmouseover = function () {
//            var img = this.getElementsByTagName("img")[0];
//            var imgSrc = img.src;//img.getAttribute("src");
//            smallimg.src = imgSrc;
            var smallSrc = this.getAttribute("data-small");
            smallimg.src = smallSrc;
            var bigSrc = this.getAttribute("data-big");
            bigImg.src = bigSrc;

        }
    }

    function getStyleAttr(obj, attr) {
        if (window.getComputedStyle) {
            return parseInt(window.getComputedStyle(obj)[attr]);
        } else {
            return parseInt(obj.currentStyle[attr]);
        }
    }

</script>
</html>